<template>
  <div class="my">
    <div class="my_top">
      <img src="../../../public/lsc/user.jpg" alt="" @click="jump" />

      <span>
        {{ userName }}<van-icon name="arrow" color="#f5f5f5" @click="jump"
      /></span>
    </div>
    <div class="buy">
      <p>生椰自由卡</p>
      <p>包月更划算，最高可省<span>36元</span></p>
      <van-button round type="info" size="small" class="btn"
        @click="aaa">立即购买</van-button
      >
    </div>
    <div class="card">
      <van-grid square :column-num="5">
        <van-grid-item
          v-for="(value, i) in arr"
          :key="i"
          :icon="value.icon"
          :text="value.text"
          :badge="value.badge"
          @click="add(i)"
        />
      </van-grid>
    </div>
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
      ><Discounts></Discounts>
    </van-popup>
    <h4>为你推荐</h4>
    <Recommed></Recommed>
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import Recommed from "@/components/lsc/recommed.vue";
import Discounts from "@/components/lsc/discounts.vue";
import Footer from "../../components/footer"

export default {
  components: { Recommed, Discounts,Footer },
  created() {
    let userName = localStorage.getItem("userName");
    console.log("userName:", userName);
    this.userName = userName;
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    jump() {
      this.$router.push("/profile");
    },
    aaa(){
      this.$router.push("/Member");
    },
    add(i) {
      switch (i) {
        case 0:
          this.$router.push("/order");
          break;
        case 1:
          this.$router.push("/wallet");
          break;
        case 2:
          this.$router.push("/coupons");
          break;
        case 3:
          this.$router.push("/gift");
          break;
        case 4:
          this.$router.push("/balance");
          break;
        case 5:
          this.$router.push("/invoice");
          break;
        case 6:
          this.showPopup();
          break;
        case 7:
          this.$router.push("/service");
          break;
        case 8:
          this.$router.push("/join");
          break;
        case 9:
          break;
      }
    },
  },
  data() {
    return {
      userName: "",
      show: false,
      arr: [
        { icon: "orders-o", text: "我的订单" },
        { icon: "balance-o", text: "咖啡钱包" },
        { icon: "bill-o", text: "优惠卷", badge: 4 },
        { icon: "flower-o", text: "礼品卡" },
        { icon: "flower-o", text: "账户余额" },
        { icon: "comment-o", text: "发票管理" },
        { icon: "point-gift-o", text: "兑换优惠" },
        { icon: "service-o", text: "帮助反馈" },
        { icon: "user-o", text: "招商加盟" },
        {},
      ],
    };
  },
};
</script>

<style scoped>
.my {
  height: 10rem;
  background-color: #f5f5f5;
}
.my_top {
  width: 100%;
  height: 1.6rem;
  background-color: #4349a1;
  position: relative;
}
.my_top img {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  position: absolute;
  top: 0.6rem;
  left: 0.22rem;
}
.my_top span {
  position: absolute;
  top: 0.77rem;
  left: 0.9rem;
  color: #fff;
}
.buy {
  width: 90%;
  height: 0.8rem;
  margin: -0.4rem auto;
  background-color: #dbb779;
  border-radius: 0.1rem;
  position: relative;
  z-index: 999;
}
.buy p {
  display: inline-block;
  width: 2rem;
}
.buy p:nth-of-type(1) {
  font-size: 0.14rem;
  padding: 0.2rem 0 0 0.2rem;
}
.buy p:nth-of-type(2) {
  font-size: 0.1rem;
  padding: 0.03rem 0 0 0.2rem;
}
.buy p:nth-of-type(2) span {
  color: red;
}
.btn {
  position: absolute;
  top: 0.26rem;
  right: 0.14rem;
  background-color: #4f55a9;
  color: #b19fb6;
}
.card {
  width: 95%;
  margin: 0.4rem auto;
  margin-bottom: 0;
  background-color: #fff;
}
h4 {
  width: 95%;
  height: 0.32rem;
  margin: 0 auto;
  line-height: 0.32rem;
  font-size: 0.13rem;
  background-color: #fff;
}
/deep/.van-info {
  color: red;
  width: 0.19rem;
  background-color: #fff;
  border: 0.019rem solid red;
  top: 0.04rem;
  right: 0.03rem;
}
.footer{
  position: fixed;
  bottom: 0;
}
</style>